<template>
	<view class="content">
		<view class="form">
			<u--form :rules="rules" ref="register" :model="form" labelPosition="top" labelWidth="80" :labelStyle="{color: '#ffffff', fontSize: '25rpx', paddingBottom: '10rpx'}">
				<u-form-item label="手机号" prop="username">
					<u--input v-model="form.username" class="input" color="#ffffff" maxlength="12"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u--input v-model="form.password" type="password" class="input" color="#ffffff" maxlength="36"></u--input>
				</u-form-item>
				<u-form-item >
					<view class="toRegister" @click="navTo('/pages/login')">已有账号？去登录</view>
				</u-form-item>
				<u-form-item>
					<button @click="onregister" class="light-btn btn">立即注册</button>
				</u-form-item>
				
			</u--form>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				rules: {
					username: [
						{
							type: 'string',
							required: true, 
							message: '请输入手机号',
							trigger: ['blur']
						}
					],
					password:[
						{
							type: 'string',
							required: true,
							message: '请输入密码',
							trigger: ['blur']
						},
					]
				},
				form: {
					username: '',
					password: '',
					// code: null
				}
			}
		},
		onLoad() {
		},
		methods: {
			...mapActions('user', ['register']),
			onregister(){
				this.$refs.register.validate().then(res => {
					this.register({
						mobile:this.form.username,
						password:this.form.password
					}).then(res => {
						uni.$u.toast("注册成功")
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1500)
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.form{
			padding: 20rpx 20rpx;
			.input{
				background-color: #232639 !important;
				border: 1rpx solid #666666 !important;
				color: #ffffff;
			}
			.intro{
				color: #ffffff;
				font-size: 25rpx;
				display: flex;
				.light{
					color: #2979ff;
				}
			}
		}
		.btn{
			margin-top: 20rpx;
			width: 100%;
		}
		.toRegister{
			color: #bf8fef;
			margin-left: auto;
		}
		.inactive{
			background: #999999 !important;
		}
	}
</style>
